<!--
 * @Author: huzhijie422 2055606745@qq.com
 * @Date: 2025-08-07 12:10:50
 * @LastEditors: huzhijie422 2055606745@qq.com
 * @LastEditTime: 2025-08-07 12:20:44
 * @FilePath: \doorlock\pages\my\components\submission.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="submission-container">
    <view class="success-icon-container">
      <image class="success-icon" src="/static/img/sub.png"></image>
    </view>
    <view class="success-text">支付成功！</view>
  <view class="button-container">
      <view class="button-item primary-button" @click="viewOrder">查看订单</view>
      <view class="button-item secondary-button" @click="backToHome">返回首页</view>
    </view>
  </view>
</template>

<script>
export default {
 
  methods: {
    viewOrder() {
      // 查看订单的逻辑
// 	wx.navigateTo({
// url: '/pages/my/components/submission' // 目标页面路径，可带参数
// })
   uni.navigateTo({
 url: `/pages/my/components/rook`,				     
});
	console.log(1111);
    },
    backToHome() {
	
      // 返回首页的逻辑
     uni.switchTab({
        url: `/pages/index/index`,
     
      });
    }
  }
}
</script>

<style lang="scss">
$primary-color: #FF0000;
$secondary-color: #FFFFFF;
$text-color: #333333;
$border-radius: 45rpx;
$padding: 30rpx;

.submission-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx $padding;
  height: 100vh;
  box-sizing: border-box;
  background-color: #F8F8F8;

  .success-icon-container {
    width: 200rpx;
    height: 200rpx;
    background-color: rgba(255, 214, 0, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40rpx;

    .success-icon {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .success-text {
    font-size: 40rpx;
    color: $text-color;
    margin-bottom: 80rpx;
  }

  .button-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30rpx;

    .button-item {
      height: 90rpx;
      border-radius: $border-radius;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
    }

    .primary-button {
      background-color: $primary-color;
      color: $secondary-color;
    }

    .secondary-button {
      background-color: $secondary-color;
      color: $text-color;
      border: 1rpx solid #EEEEEE;
    }
  }
}
</style>